{extend name="index/iframe" /}

{block name="content"}
<form class="layui-form layui-form-my" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">CP名称</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入CP名称（中文）" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">选择游戏</label>
        <div class="layui-input-block select-box">
            <select class="selectpicker" multiple data-live-search="true" data-style="btn-inverse" >
                {volist name="app_id" id="vo"}
                <option value="{$vo.app_id}">{$vo.app_id}:{$vo.app_name}</option>
                {/volist}
            </select>
            <input type="hidden" name="app_id" id="app_id">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-block">
            <input type="text" name="account" id="account" lay-verify="required|account" placeholder="4-16位（字母，数字，下划线，减号）组成" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登陆密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" id="password" lay-verify="required|password" placeholder="4-20位（字母，数字，下划线，减号）组成" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="password" name="password_confirm" id="password_confirm" lay-verify="required|password" placeholder="请再次输入登录密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" id="remark" placeholder="请输入渠道备注，可不填" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom: 100px;">
        <div class="layui-input-block">
            <button class="layui-btn my-btn" lay-submit="" lay-filter="submitBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}

{block name="css"}
<link rel="stylesheet" href="__STATIC__/js/bootselect/bootstrap-3.3.4.css">
<link rel="stylesheet" href="__STATIC__/js/bootselect/dist/css/bootstrap-select.css">
{/block}

{block name="js"}
<script src="__STATIC__/js/bootselect/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/js/bootselect/bootstrap-3.3.4.js"></script>
<script src="__STATIC__/js/bootselect/dist/js/bootstrap-select.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function(){
        var form = layui.form
            ,$ = layui.$
            ,layer = layui.layer;

        //多选
        $('.selectpicker').change(function() {
            $('#app_id').val($(this).val());
        })
        $('.select-box .layui-form-select').css('display', 'none');

        //html编辑器
        form.verify({
            account: [
                /^[a-zA-Z0-9_-]{4,16}$/
                ,'4-16位（字母，数字，下划线，减号）组成'
            ],
            password: [
                /^[a-zA-Z0-9_-]{4,20}$/
                ,'4-20位（字母，数字，下划线，减号）组成'
            ]
        });

        //提交
        form.on('submit(submitBtn)', function(data){
            var load = layer.load();
            $.post('{:url("GameCp/add")}',data.field, function(json){
                layer.close(load);
                json.code==0 ? layer.msg(json.msg, {icon: 1, time: 1000}) : layer.msg(json.msg, {icon: 0, time: 1000});
            }, 'JSON').error(function(){
                layer.close(load);
                layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
            });
            return false;
        });
    });
</script>
{/block}